<template>
  <div class="faq-page">
    <div class="faq-list">
            <!-- 首次加载显示加载中 -->
            <div v-if="isFirstLoading" class="loading-container">
        <van-loading type="spinner" />
      </div>
      
      <!-- 加载完成后显示列表 -->
      <van-list
        v-else
        v-model:loading="loading"
        :finished="finished"
        :finished-text="t('index_noMoreData')"
        :loading-text="t('index_loading')"
        @load="onLoad"
        :immediate-check="false"
        offset="0"
        class="news-list"
      >
      <van-collapse v-model="activeNames" accordion :border="false">
        <van-collapse-item 
          v-for="(item, index) in newsList" 
          :key="index" 
          :name="index"
          :border="false"
        >
          <template #title>
            <div class="faq-title">{{ item.title }}</div>
          </template>
          <!-- <div class="faq-content">{{ item.content }}</div> -->
          <div class="faq-content" >
            <div v-html="processRichText(item.reply)" class="cont"></div>
          </div>
        </van-collapse-item>
      </van-collapse>
    </van-list>
    </div>
  </div>
</template>

<script setup lang="ts">
// 导入所需的依赖
import { getNewslist } from "@/api";
import { onMounted, ref } from 'vue';
const { t } = useI18n();
const newsList = ref([])
const page = ref(1)
const pageSize = 10
const isFirstLoading = ref(true) // 首次加载状态
const loading = ref(false);
const finished = ref(false);
// 初始化数据
const activeNames = ref([])
// const faqList = ref([
//   {
//     title: t('faqList.faq_q1'),
//     content: t('faqList.faq_a1'),
//   },
//   {
//     title: t('faqList.faq_q2'),
//     content: t('faqList.faq_a2'),
//   },
//   {
//     title: t('faqList.faq_q3'),
//     content: t('faqList.faq_a3'),
//   },
//   {
//     title: t('faqList.faq_q4'),
//     content: t('faqList.faq_a4'),
//   },
//   {
//     title: t('faqList.faq_q5'),
//     content: t('faqList.faq_a5'),
//   },
//   {
//     title: t('faqList.faq_q6'),
//     content: t('faqList.faq_a6'),
//   },
//   {
//     title: t('faqList.faq_q7'),
//     content: t('faqList.faq_a7'),
//   },
//   {
//     title: t('faqList.faq_q8'),
//     content: t('faqList.faq_a8'),
//   },
//   {
//     title: t('faqList.faq_q9'),
//     content: t('faqList.faq_a9'),
//   },
//   {
//     title: t('faqList.faq_q10'),
//     content: t('faqList.faq_a10'),
//   },
//   {
//     title: t('faqList.faq_q11'),
//     content: t('faqList.faq_a11'),
//   },
//   {
//     title: t('faqList.faq_q12'),
//     content: t('faqList.faq_a12'),
//   },
//   {
//     title: t('faqList.faq_q13'),
//     content: t('faqList.faq_a13'),
//   }
// ])

// 生命周期钩子
onMounted(() => {
  // 初始化页面
  loadInitialNews()
})

// 方法定义
function toggleFaqItem(index: number) {
  // 切换问题展开/折叠状态
  if (activeNames.value.includes(index)) {
    activeNames.value = activeNames.value.filter(name => name !== index)
  } else {
    activeNames.value.push(index)
  }
}

// 初始加载新闻数据
function loadInitialNews() {
  isFirstLoading.value = true
  getNewslist({ page: page.value, pageSize, type: 'quest' }).then(res => {
    const list = res.data || []
    newsList.value = list
    if (list.length < pageSize) {
      finished.value = true
    } else {
      page.value++
    }
  }).catch(() => {
    finished.value = true
  }).finally(() => {
    isFirstLoading.value = false
  })
}

// 加载更多新闻数据
function onLoad() {
  if (isFirstLoading.value) {
    loading.value = false
    return
  }
  
  getNewslist({ page: page.value, pageSize, type: 'quest' }).then(res => {
    const list = res.data || []
    newsList.value = newsList.value.concat(list)
    if (list.length < pageSize) {
      finished.value = true
    } else {
      page.value++
    }
  }).catch(() => {
    finished.value = true
  }).finally(() => {
    loading.value = false
  })
}

// 在setup部分添加处理富文本图片的方法
const processRichText = (html: string) => {
  const parser = new DOMParser();
  const doc = parser.parseFromString(html, 'text/html');
  const images = doc.querySelectorAll('img');
  
  images.forEach(img => {
    // 确保图片有最大宽度
    img.style.maxWidth = '100%';
    img.style.height = 'auto';
    // 添加点击预览功能
    img.onclick = () => {
      // 这里可以添加图片预览逻辑
      console.log('src:', img.src);
    };
  });
  
  return doc.body.innerHTML;
};
</script>

<style lang="less" scoped>
.faq-page {
  min-height: 100vh;
  padding: 20px 15px;
  background: url('@/assets/images/user/Topbg.png') no-repeat center center;
  background-size: 100% cover;
}

.faq-list {
  // 使用深度选择器修改vant组件样式
  :deep(.van-collapse) {
    background-color: transparent;
    border: none;
  }
  
  :deep(.van-collapse-item) {
    margin-bottom: 10px;
    
    .van-collapse-item__title {
      background-color: rgba(246, 224, 202, 0.05);
      color: #f6e0ca;
      font-size: 15px;
      padding: 15px;
      border-radius: 8px;
      height: auto;
      border: none;
      
      &::after {
        display: none;
      }
      
      &--expanded {
        border-radius: 8px 8px 0 0;
      }
    }
    
    .van-cell {
      border: none;
    }
    
    .van-cell__right-icon {
      color: rgba(246, 224, 202, 0.5);
    }
    
    .van-collapse-item__wrapper {
      background-color: rgba(246, 224, 202, 0.02);
      border-radius: 0 0 8px 8px;
      border: none;
    }
    
    .van-collapse-item__content {
      background: linear-gradient(0deg, rgba(254, 242, 230, 0) 10%, rgba(254, 237, 221, .1) 63%);
      color: rgba(246, 224, 202, 0.8);
      padding: 15px;
      font-size: 14px;
      line-height: 1.6;
      border: none;
    }
  }
}

.faq-title {
  flex: 1;
  padding-right: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80%; /* 确保有空间显示省略号 */
}

.faq-content {
  color: rgba(246, 224, 202, 0.8);
  img {
      width: 100%;
      height: 100%;
  }
}
.cont{
  img {
      max-width: 100% !important;
      height: auto !important;
      display: block;
      margin: 10px auto;
      border-radius: 4px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}
</style>
